<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>-->
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

    <!--<script src='./aframe-master.min.js'></script>-->
    <script src='./aframe-ar-nft.js'></script>
    <script>
        document.onclick = function() {
            if (document.querySelector("#vid")) {
                //alert("#vid-3");
                document.querySelector("#vid").play()
                document.querySelector("#tips").style.display = 'none'
            }
            /*if (document.querySelector("#arjs-video")) {
                //alert("#arjs-video-3");
                document.querySelector("#arjs-video").play()
                document.querySelector("#tips").style.display = 'none'
            }*/
        };
        function animate() {
            let currentTime = new Date().getTime()
            let timeSinceLastUpdate = currentTime - this.lastUpdate;
            this.lastUpdate = currentTime;
            requestAnimationFrame(animate);
            //console.log('animate-1')
            render(timeSinceLastUpdate);
        }
        function render(timeDelta) {
            this.uniforms.time.value += (timeDelta ? timeDelta / 1000 : 0.05);
            this.renderer.render(this.scene, this.camera);
        }
        window.onload = function() {
            let videotwo = document.querySelector("#vid");

            this.container = document.getElementById('container');
            this.camera = new THREE.Camera();
            this.camera.position.z = 1;
            this.scene = new THREE.Scene();

            let videoTexture = new THREE.VideoTexture(videotwo);
            console.log('videoTexture-1', videoTexture)
            videoTexture.minFilter = THREE.LinearFilter;
            videoTexture.magFilter = THREE.LinearFilter;
            videoTexture.format = THREE.RGBAFormat;

            // shader stuff
            this.uniforms = {
                time: { type: "f", value: 1.0 },
                firsttexture: { type: "sampler2D", value: videoTexture }
            };
            let material = new THREE.ShaderMaterial({
                uniforms: this.uniforms,
                vertexShader: `varying vec2 vUv;
                    void main() {
                        vUv = uv;
                        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
                    }`,
                fragmentShader: `#ifdef GL_ES
                    precision highp float;
                    #endif

                    uniform float time;
                    uniform sampler2D firsttexture;
                    varying vec2 vUv;

                    void main( void ) {
                        gl_FragColor = vec4(
                        texture2D(firsttexture, vec2(vUv.x/2., vUv.y)).rgb,
                        texture2D(firsttexture, vec2(0.5+vUv.x/2., vUv.y)).r
                        );
                    }`,
                transparent: true
            });
            this.lastUpdate = new Date().getTime();
            let geometry = new THREE.PlaneBufferGeometry(2, 2);
            let mesh = new THREE.Mesh(geometry, material);
            mesh.scale.setScalar(0.8);
            this.scene.add(mesh);
            this.renderer = new THREE.WebGLRenderer({ alpha: true });
            this.renderer.setPixelRatio(window.devicePixelRatio);
            //this.renderer.setClearColor(new THREE.Color("lightgrey"), 0);
            this.renderer.setSize(464, 960);

            this.container.appendChild(this.renderer.domElement);

            //document.getElementById('play-button').addEventListener('click', e => { video.play(); });
            this.renderer.domElement.style.height = "600px";
            this.renderer.domElement.style.width = "auto";
            this.renderer.domElement.style.border = "1px solid red"
            animate();
            //this.renderTwo();
            console.log('play-3')

            AFRAME.registerComponent('videohandler', {
                init: function () {
                    var marker = this.el;
                    this.vid = document.querySelector("#vid");
                    let container = document.getElementById('container');

                    marker.addEventListener('markerFound', function () {
                        console.log('markerFound-1')
                        container.style.display = 'flex'
                        this.vid.play();
                        this.vid.muted = false
                    }.bind(this));

                    marker.addEventListener('markerLost', function() {
                        console.log('markerLost-1')
                        container.style.display = 'none'
                        this.vid.pause();
                        //this.vid.currentTime = 0;
                    }.bind(this));
                }
            });
        };
    </script>

    <style>
        .arjs-loader {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .arjs-loader div {
            text-align: center;
            font-size: 1.25em;
            color: white;
        }

        .tips {
            position: fixed;
            top: 20px;
            right: 20px;
            color: #fff;
            font-weight: bold;
        }
        #container {
            display: none;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body style='margin : 0px; overflow: hidden;'>
    <div class="tips" id="tips">
        点击屏幕后播放视频解说2
    </div>
    <div class="arjs-loader">
        <div>Loading, please wait...</div>
    </div>
    <a-scene
        vr-mode-ui="enabled: false;"
        renderer='antialias: true; alpha: true; precision: mediump;'
        embedded arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false;'
    >
        <div id="container"></div>
        <a-assets>
            <video src="./KIVICUBE-2.mp4"
                preload="auto" id="vid" response-type="arraybuffer" loop muted
                crossorigin webkit-playsinline autoplay playsinline controls>
            </video>
        </a-assets>

        <a-nft
            videohandler
            type='nft' url='./dataNFT/yang1'
            smooth="true" smoothCount="10" smoothTolerance="0.01" smoothThreshold="5"
        >
            <!--<a-video
                src="#vid"
                position='50 150 -100'
                rotation='90 0 180'
                width='300'
                height='175'
            >
            </a-video>-->
        </a-nft>
		<a-entity camera></a-entity>
	</a-scene>
</body>
</html>
